<template>
  <div class="single_max_height_width">
    <!--  搜索表单  -->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline single_form">
      <el-form-item label="权限值">
        <el-input v-model="searchForm.permissionValue" placeholder="权限值"></el-input>
      </el-form-item>
      <el-form-item label="权限名称">
        <el-input v-model="searchForm.permissionName" placeholder="权限名称"></el-input>
      </el-form-item>
      <el-form-item label="目录标志">
        <el-input v-model="searchForm.catalogFlag" placeholder="目录标志"></el-input>
      </el-form-item>
      <el-form-item label="父id">
        <el-input v-model="searchForm.parentId" placeholder="父id"></el-input>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-input v-model="searchForm.createTime" placeholder="创建时间"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage">查询</el-button>
        <el-button type="primary" @click="changeEditForm(null)">新增</el-button>
      </el-form-item>
    </el-form>

    <!--  表格  -->
    <el-table class="single_table" :data="tableData" border :header-cell-style="{textAlign: 'center'}" :cell-style="{ textAlign: 'center' }">
      <el-table-column prop="permissionValue" label="权限值">
      </el-table-column>
      <el-table-column prop="permissionName" label="权限名称">
      </el-table-column>
      <el-table-column prop="catalogFlag" label="目录标志">
      </el-table-column>
      <el-table-column prop="parentId" label="父id">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="changeEditForm(scope.row.id)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <div class="single__hold_page"></div>
    <el-pagination class="single_page"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="searchForm.size"
                   :page-sizes="[5, 10, 15, 20]"
                   :page-size="searchForm.size"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>

    <!--  子组件  -->
    <edit :showFlag="editShowFlag" :id="formId" @changeForm="changeEditForm" @reloadTable="findPage"></edit>
  </div>
</template>

<script>
  import {findPageApi} from '@/api/sys/PermissionApi'
  import edit from './components/edit'

  export default {
    name: 'user',
    components: {
      edit
    },
    data() {
      return {
        // 搜索数据
        searchForm: {
          // 当前页面
          current: 1,
          // 每页大小
          size: 10,
          // 权限值
          permissionValue: '',
          // 权限名称
          permissionName: '',
          // 目录标志
          catalogFlag: true,
          // 父id
          parentId: null,
          // 创建时间
          createTime: null,
        },
        // 表格数据
        tableData: [],
        // 总条数
        total: 0,
        // 编辑框展示标志
        editShowFlag: false,
        // 绑定子组件的id
        formId: null
      }
    },
    mounted() {
      this.findPage()
    },
    methods: {
      // 修改每页大小
      handleSizeChange(val) {
        this.searchForm.size = val
        this.searchForm.current = 1
        this.findPage()
      },
      // 修改搜索页面
      handleCurrentChange(val) {
        this.searchForm.current = val
        this.findPage()
      },
      // 查询列表
      findPage() {
        findPageApi(this.searchForm).then((res) => {
          if (res.success) {
            console.log(res)
            this.tableData = res.data.records
            this.total = res.data.total
          } else {
            this.$message.error(res.message);
          }
        })
      },
      // 修改 编辑框 展示状态
      changeEditForm(id) {
        this.formId = id
        this.editShowFlag = !this.editShowFlag
      }
    },
  }
</script>

<!-- 默认引入公共样式 -->
<style scoped src="@/assets/css/base_single_table.css">

</style>
